<template>
  <div class="extract__step--list">
    <n-collapse>
      <n-collapse-item title="抽签历史记录">
        <div class="extract__form">
          <n-steps :current="current">
            <n-step title="抽签赛制选择" description="根据本场比赛的赛制选择抽签赛制。" />
            <n-step title="抽签模式选择" description="选择一种抽签模式" />
            <n-step title="设置抽签信息" description="设置各种各样的抽签信息。" />
            <n-step title="抽签展示" description="向观众展示抽签。" />
          </n-steps>
          <n-space style="margin-top: 1rem;">

            <n-radio-group v-model:value="current" size="medium" name="basic">
              <n-radio-button :value="1">
                第一步
              </n-radio-button>
              <n-radio-button :value="2" :disabled="stepTwoDis">
                第二步
              </n-radio-button>
              <n-radio-button :value="3" :disabled="stepThreeDis">
                第三步
              </n-radio-button>
              <n-radio-button :value="4" :disabled="stepFourDis">
                第四步
              </n-radio-button>
            </n-radio-group>
          </n-space>
        </div>
      </n-collapse-item>
    </n-collapse>

  </div>
  <div class="component__container">
    <component :is="extractObject.component"
      :nowProcess="nowProcess"
      :extractData="finalExtractResult"
      :extractObject="extractObject"
      :readOnly="current < nowProcess"
      @nextClick="handleNext"
      @preClick="handlePre"
      @updateTeam="updateTeam"
      @finishPick="handleFinish">
    </component>
  </div>
</template>

<script setup lang='ts'>
import firstChoose from '@/views/extractThing/firstChoose.vue';
import finalResult from '@/views/extractThing/finalResult.vue';
import type { Component } from 'vue';
import { getNextComponent } from '@/views/extractThing/hooks.ts';

// 接口开始
interface GameInfo {
  leftTeam: string
  rightTeam: string
}
interface ExtractOptions {
  extractLabel: string | null //抽取标题
  extractNumber: number | null //抽取人数
  groupNumber: number | null //分组
  extractPerson: string | null //抽签人
}
interface ExtractObject {
  component: Component
  extractMode: null | string
  gameMode: null | string
  data: string[]
  options: ExtractOptions
  historyComponent: Component[]
}
const extractObject = reactive<ExtractObject>({
  component: firstChoose,
  extractMode: null,
  gameMode: null,
  data: [],
  options: {
    extractLabel: null,
    extractNumber: null,
    groupNumber: null,
    extractPerson: null,
  },
  historyComponent: [firstChoose]
});


// 激活步数的进度
const current = ref<number>(1);
// 目前已经进行了的进度
const nowProcess = ref<number>(1);
const finalExtractResult = ref<null | string[][] | GameInfo[]>(null);
// 禁用条件
const stepTwoDis = computed(() => {
  return nowProcess.value < 2;
});
const stepThreeDis = computed(() => {
  return nowProcess.value < 3;
});
const stepFourDis = computed(() => {
  return nowProcess.value < 4;
});
const handleNext = (data: any, key: keyof ExtractObject) => {
  const nextComponent = getNextComponent(data, key);
  extractObject.component = nextComponent;
  extractObject.historyComponent.push(nextComponent);
  if (data instanceof Object && extractObject[key] instanceof Object) {
    Object.assign(extractObject[key], data)
  } else {
    extractObject[key] = data;
  }
  nowProcess.value++;
  current.value = nowProcess.value;
}
// 撤销到上一步重置操作
const handlePre = (key: keyof ExtractObject) => {
  if (key === 'gameMode' || key === 'extractMode') {
    extractObject[key] = null;
  } else if (key === 'options') {
    extractObject[key] = {
      extractLabel: null,
      extractNumber: null,
      groupNumber: null,
      extractPerson: null
    }
    extractObject.data = [];
  }
  extractObject.historyComponent.pop();
  nowProcess.value--;
  current.value = nowProcess.value;
}
const updateTeam = (teamList: string[]) => {
  extractObject.data = [];
  teamList.forEach(item => {
    extractObject.data.push(item);
  })
}
watch(current, ((newVal: number) => {
  extractObject.component = extractObject.historyComponent[newVal - 1];
}))
// 生成表格
const handleFinish = (teamGameInfo:GameInfo[],groupTeam:string[][])=>{
   if(extractObject.gameMode === 'Group'){
    finalExtractResult.value = groupTeam;
   }else{
    finalExtractResult.value = teamGameInfo;
   }
   extractObject.component = finalResult;
}
</script>
<style scoped lang='scss'>
.extract__step--list {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0.5rem;
  z-index: 3;

  .extract__form {
    padding: 1rem;
  }
}

.component__container {
  padding: 2rem;
}
</style>